// Dictionary Detail Page
// Displays a dictionary detail entry
//
// MDM 06.06.2012

Ext.define('Sencha.view.DictionaryDetailPageView', {
    extend: 'Ext.Container',
    xtype: 'dictionarydetailpageview',
    config: {
        scrollable: {
           direction: 'vertical',
           directionLock: true
        },
        
        // Properties
        sourceRecord: null,
        //navigationView: null,
        //cls: 'dictionarydetailcontainer',
        
        items: [
            {
                // header container - includes image thumb, target word and speaker button
                xtype: 'container',
                name: 'newContainerHeader',
                cls: 'dictionarydetailheader',
                layout:{
                   type:'vbox',
                   align:'left'
                },
                items: [
                    {
                        xtype: 'image',
                        //text: 'image button',
                        width: '75px',
                        height: '65px',
                        cls: 'dictionaryImageButton',
                        docked: 'left' 
                        // We need to listen here because we have multiple instances of this object
                        // which we cannot differentiate between using component queries
                        
                    },
                    {
                        html: ''
                    },
                    {
                        xtype: 'image',
                        text: 'speaker button',
                        cls: 'dictionarySpeakerButton',
                        //icon: 'images/speaker.png',
                        html: '<img src="images/speaker.png" />',
                        width: '33px',
                        height: '44px',
                        margin: '5 0 0 -1',
                        // Sencha bug? means we can't detect image button events in the controller
                        listeners : {
                            tap : function() {
                                var dictTargetId = this.getParent().getParent().getSourceRecord().get('dictionaryTargetId');
                                console.log('dictTargetId = ' + dictTargetId);
                                
                                var associatedRecord = Ext.getStore("DictionaryTargets").getById( dictTargetId );
                                console.log('audioURL = ' + associatedRecord.get('audioURL') );
                                var audioURL = Sencha.app.getPersistentFileStoreVar() + "/assets/" + associatedRecord.get('audioURL');
                                console.log('audioURL = ' + audioURL);
                                var my_media = new Media(
                                    audioURL,
                                    // success callback
                                    function() {
                                        console.log("playAudio():Audio Success");
                                    },
                                    // error callback
                                    function(err) {
                                        console.log("playAudio():Audio Error: "+err);
                                        navigator.notification.alert(msg, null, 'Capture error');
                                    }
                                );
                        
                                Sencha.app.mediaPtr=my_media;
                                //my_media.release();
                                Sencha.app.mediaPtr.play();
                    
                            }
                        }
                    }
                ]
            },
            {
                // main body text of dictionary entry
                //html: this.getDetailViewHTML( record.get('id') )
                //cls: 'dictionarydetailcontainer',
                html: ''
            },
            {
                /*
                xtype: 'button',
                text: 'Goto WordMaker',
                width: '75px',
                height: '65px',
                cls: 'jumpToWordmakerButton',
                */
                xtype: 'image',
                //text: 'speaker button',
                cls: 'dictionarywordmakerbutton',
                html: '<img src="images/WordMixer.png" />',
                width: '40px',
                height: '30px',
                margin: '0 0 40 6',
                height: '30px',
                hidden: true,
                listeners : {
                    tap : function() {
                        var dictTargetId = this.getParent().getSourceRecord().get('dictionaryTargetId');
                        var associatedRecord = Ext.getStore("DictionaryTargets").getById( dictTargetId );
                        var conjId = associatedRecord.get('conjugationId');
                        if (conjId) {
                            //this.getParent().getParent().getParent().getParent().setTabJump( conjId );
                            this.getParent().getParent().getParent().getParent().setTabJump('3');
                            this.getParent().getParent().getParent().getParent().setActiveItem(2);
                        }
                    }
                }
            }
        ]
    },
    
        
           
    // ...
    //
    initialize: function() {
        var dictTargetId = this.getSourceRecord().get('dictionaryTargetId');
        var associatedRecord = Ext.getStore("DictionaryTargets").getById( dictTargetId );
           
           console.log('sourceRec = ' + this.getSourceRecord().get('id') );
        // Display (or hide) image
        if ( associatedRecord.get('imageURL') ) {
           //var iconImg = Sencha.app.getPersistentFileStoreVar() + '/assets/' + associatedRecord.get('imageURL');
           //this.getAt(0).getAt(0).setSrc( iconImg );
           //console.log(iconImg);
           
           this.getAt(0).getAt(0).setHtml('<div class=dictImageThumb><div><img src="' + Sencha.app.getPersistentFileStoreVar() + '/assets/' + associatedRecord.get('imageURL') + '" /></div></div>');
        } else {
           this.getAt(0).getAt(0).setHidden(true);
        }
        
        // Display Header text
        this.getAt(0).getAt(1).setHtml('<div class=dictDetailHeadline><div class=dictDetailTargetWord>' + this.getSourceRecord().get('targetWord') + '</div><div class=inflection>' + this.getSourceRecord().get('inflection') + '</div></div>');
 
        // Display main dictionary entry text
        this.getAt(1).setHtml('<div class=dictionaryDetail><div class=dictDetailViewDetailEntry>' + associatedRecord.get('detailedEntry') + '</div></div>');
    
        // Hide speaker icon if no audio
        if ( !associatedRecord.get('audioURL') ) {
           this.getAt(0).getAt(2).setHidden(true);
        }
           
        // Show Wordmaker icon if there is a conjugationId
        if ( associatedRecord.get('conjugationId') ) {
           this.getAt(2).setHidden(false);
        }
    }
        
});